<template>
    <el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
        <el-tabs v-model="msgType">
            <el-tab-pane label="文本" name="text">
                <el-form :model="textForm" :rules="dataRule" ref="dataForm">
                    <el-form-item prop="replyContent">
                        <el-input v-model="textForm.replyContent" type="textarea" :rows="5" placeholder="回复内容"
                                  maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete/>
                        <el-button type="text" @click="addLink">插入链接</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图片" name="image">
                <el-form :model="imageForm">
                    <el-form-item label="素材">
                        <el-input
                            label="mediaID"
                            v-model="imageForm.media_id"
                            @focus="mediaDiaVis = true"
                        />
                        <!--        素材选择器-->
                        <mater-select-dialog
                            :visible.sync = "mediaDiaVis"
                            mater-type="image"
                            @selected="handlerMaterSelected"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="语音" name="voice">
                <el-form :model="voiceForm">
                    <el-form-item label="素材">
                        <el-input
                            label="mediaID"
                            v-model="voiceForm.media_id"
                            @focus="mediaDiaVis = true"
                        />
                        <!--        素材选择器-->
                        <mater-select-dialog
                            :visible.sync = "mediaDiaVis"
                            mater-type="voice"
                            @selected="handlerMaterSelected"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="音乐" name="music">

            </el-tab-pane>
            <el-tab-pane label="视频" name="video">
                <el-form :model="videoForm" label-width="80px">
                    <el-form-item label="视频素材">
                        <el-input
                            v-model="videoForm.media_id"
                            @focus="() => {$refs.videoSelect.visible = true}"
                        />
                        <!--        素材选择器-->
                        <mater-select-dialog
                            ref="videoSelect"
                            mater-type="video"
                            @selected="data => videoForm.media_id = data.mediaId"
                        />
                    </el-form-item>
                    <el-form-item label="封面图片">
                        <el-input
                            v-model="videoForm.thumb_media_id"
                            @focus="() => {$refs.videoThumbSelect.visible = true}"
                        />
                        <!--        素材选择器-->
                        <mater-select-dialog
                            ref="videoThumbSelect"
                            mater-type="image"
                            @selected="data => videoForm.thumb_media_id = data.mediaId"
                        />
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input
                            v-model="videoForm.title"
                        />
                    </el-form-item>
                    <el-form-item label="说明">
                        <el-input
                            type="textarea"
                            v-model="videoForm.description"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图文" name="mpnews"></el-tab-pane>
            <el-tab-pane label="图文（外链）" name="outLink"></el-tab-pane>
            <el-tab-pane label="菜单" name="menu">

            </el-tab-pane>
            <!--            <el-tab-pane label="卡卷" name="card"></el-tab-pane>-->
            <!--            <el-tab-pane label="小程序" name="miniApp"></el-tab-pane>-->
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="success" @click="dataFormSubmit()"
                       :disabled="uploading">{{ uploading ? '发送中...' : '发送' }}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import MaterSelectDialog from "@/components/dialog/wx/materSelectDialog";
export default {
    components: {
        MaterSelectDialog,
        msgPreview: () => import('@/components/wx/message/mgsLog/msgPreview')
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            uploading: false,
            openid:'',
            textForm: {
                replyType: 'text',
                replyContent: ''
            },
            imageForm: {
                mediaId: ''
            },
            musicForm:{
                title:"MUSIC_TITLE",
                description:"MUSIC_DESCRIPTION",
                musicurl:"MUSIC_URL",
                hqmusicurl:"HQ_MUSIC_URL",
                thumb_media_id:"THUMB_MEDIA_ID"
            },
            voiceForm:{
                mediaId:''
            },
            videoForm:{
                media_id:"MEDIA_ID",
                thumb_media_id:"MEDIA_ID",
                title:"TITLE",
                description:"DESCRIPTION"
            },
            newsForm:{
                media_id:"MEDIA_ID"
            },
            newsLinkForm:{
                articles: [
                    {
                        "title":"Happy Day",
                        "description":"Is Really A Happy Day",
                        "url":"URL",
                        "picurl":"PIC_URL"
                    }
                ]
            },
            menuForm:{
                head_content: "您对本次服务是否满意呢? ",
                list: [
                    {
                        "id": "101",
                        "content": "满意"
                    },
                    {
                        "id": "102",
                        "content": "不满意"
                    }
                ],
                tail_content: "欢迎再次光临"
            },
            mediaDiaVis:false, // 素材选择器的显示状态
            dataRule: {
                replyContent: [
                    {required: true, message: "回复内容不能为空", trigger: "blur"}
                ]
            },
            msgType: {
                type: String,
                default: 'text'
            }
        }
    },
    watch: {
        visible(newVal, oldVal) {
            this.$emit("update:visible", newVal)
        }
    },
    methods: {
        init(openid) {
            if (!openid) throw '参数异常'
            this.openid = openid
            this.visible = true
        },
        // 表单提交
        dataFormSubmit() {
            if (this.uploading) return
            this.uploading = true
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.$http({
                        url: this.$http.adornUrl(`/manage/wxMsg/reply`),
                        method: 'post',
                        data: this.$http.adornData(this.dataForm)
                    }).then(({data}) => {
                        if (data && data.code === 200) {
                            this.$message({
                                message: '回复成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false

                                }
                            })
                            this.$emit("success", {...this.dataForm});
                            this.dataForm.replyContent = ''
                        } else {
                            this.$message.error(data.msg)
                        }
                        this.uploading = false
                    })
                }
            })
        },
        addLink() {
            this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
        },
    }
}
</script>
<style scoped>
.msg-container {
    background: #eee;
}
</style>